@model WalkingTec.Mvvm.Doc.ViewModels.StudentVms.StudentVm

<wt:fieldset field-set-style="Simple" title="Combobox">
 </wt:fieldset>
   <p>The common attributes of combobox:</p>
        <table lay-filter="parse-table-demo">
            <thead>
                <tr>
                    <th lay-data="{field:'username', width:200}">Property</th>
                    <th lay-data="{field:'required', width:100}">Requird</th>
                    <th lay-data="{field:'joinTime', width:600}">Description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Id</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>Control ID, generated according to the bound field name by default</td>
                </tr>
                <tr>
                    <td>Field</td>
                    <td><i class="layui-icon layui-icon-ok"></i></td>
                    <td>Binding field,required</td>
                </tr>
                <tr>
                    <td>Disabled</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>Disabled,or not</td>
                </tr>
                <tr>
                    <td>Name</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>Control name,  generated by default according to the bound field name</td>
                </tr>
                <tr>
                    <td>LabelText</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>Label content</td>
                </tr>
                <tr>
                    <td>LabelWidth</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>Label length, default =80</td>
                </tr>
                <tr>
                    <td>HideLabel</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>Hide label, or not</td>
                </tr>
                <tr>
                    <td>EmptyText</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>Prompt text when there is no data</td>
                </tr>
                <tr>
                    <td>YesText</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>If the binding field is of boolean type is ‘yes’, it corresponds to the text displayed by ‘true’.The default value is yes</td>
                </tr>
                <tr>
                    <td>NoText</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>If the binding field is of boolean type is false’, it corresponds to the text displayed by ‘false’. The default value is false</td>
                </tr>
                <tr>
                    <td>Items</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>List data source. If the bound field is Boolean or enumeration, the framework will automatically reflect the drop-down list; No need to be filled in</td>
                </tr>
                <tr>
                    <td>MultiSelect</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>Enable multiple selection,or not</td>
                </tr>
                <tr>
                    <td>EnableSearch</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>Enable local search. Search cannot be used with multiple selections</td>
                </tr>
                <tr>
                    <td>ChangeFunc</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>JS triggered after change</td>
                </tr>
                <tr>
                    <td>LinkField</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>Linkage mode, which set the field bound by another ComboBox to be linked</td>
                </tr>
                <tr>
                    <td>TriggerUrl</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>Linkage mode, which set the URL that is called after changing the selection. The URL receives a parameter named ID and returns text JSON and value array JSON.</td>
                </tr>
            </tbody>
        </table>
    <wt:quote>
        <p>
            Combobox supports directly binding enumeration and Boolean fields, also supports setting data sources through the items property. Items need to be bound to a list. ComboSelectListItem is an auxiliary class provided by the framework, which has four properties: Text, Value, Selected and Disabled . Currently, Disabled is a new property specially added for the Transfer component, which is used to disable modification of certain specific items.
        </p>
        <ul class="doc">
            <li>When the enumeration field is bound, the frame automatically reflects the enumeration. According to the display property of each enumeration value as text and the enumeration value itself as value, the pull-down menu is generated</li>
            <li>When Binding Boolean fields, the framework uses the values of YesTex and NoText as text and Boolean values as values to generate pull-down menus. By default, true displays ‘yes’ and false displays ‘No’</li>
            <li>When the items data source is set, the framework uses the text property in ComboSelectListItem as text and the value property as value to generate the drop-down menu</li>
            <li>The items data source can also be setas other types of Lists. In this case, the framework will call ToString as the text and value of the drop-down menu for each item in the list</li>
        </ul>
    </wt:quote>
        <wt:tab>
            <wt:tabheaders>
                <wt:tabheader title="Effect" />
                <wt:tabheader title="Code" />
            </wt:tabheaders>
            <wt:tabcontents>
                <wt:tabcontent>
                    <wt:form vm="@Model" style="max-width:600px;">
                        <wt:combobox field="Entity.Sex" />
                        <wt:combobox field="Entity.IsValid" />
                        <wt:combobox field="Entity.IsValid" yes-text="true" no-text="false" />
                        <wt:combobox field="SelectedSchool" label-text="School" items="AllSchools" />
                        <wt:combobox field="SelectedSchool2" label-text="SchoolSearch" items="AllSchools" enable-search="true"/>
                        <wt:combobox field="SelectedSchools" label-text="Schools" items="AllSchools" multi-select="true" />
                        <wt:row align="AlignEnum.Right">
                            <wt:submitbutton disabled="true" />
                            <wt:closebutton disabled="true" />
                        </wt:row>
                    </wt:form>
                </wt:tabcontent>
                <wt:tabcontent>
                    <wt:code>
&ltwt:form vm="@@Model" width="600"&gt
    &ltwt:combobox field="Entity.Sex" /&gt
    &ltwt:combobox field="Entity.IsValid" /&gt
    &ltwt:combobox field="Entity.IsValid" yes-text="true" no-text="false" /&gt
    &ltwt:combobox field="SelectedSchool" label-text="School" items="AllSchools" /&gt
    &ltwt:combobox field="SelectedSchool2" label-text="SchoolSearch" items="AllSchools" enable-search="true"/&gt
    &ltwt:combobox field="SelectedSchools" label-text="Schools" items="AllSchools" multi-select="true" /&gt
    &ltwt:row align="AlignEnum.Right"&gt
        &ltwt:submitbutton disabled="true" /&gt
        &ltwt:closebutton disabled="true" /&gt
    &lt/wt:row&gt
&lt/wt:form&gt

                    </wt:code>
                </wt:tabcontent>
            </wt:tabcontents>
        </wt:tab>

<wt:fieldset field-set-style="Simple" title="Linkage">
    <wt:quote>
        <p>ComboBox can enable linkage function by setting LinkedField and TriggerUrl</p>
        <p>LinkField points to a field in VM, the framework will look for whether there exist other Combobox,CheckBox,Radio,Tree controls that bind this field, and take the found control as the linkage target</p>
        <p>TriggerUrl takes a parameter named ID and returns JSON in the form of Text and Value arrays. If the linked tree control , it needs to return JSON in the form of TreeSelectListItem</p>
        <p>The framework provides GetSelectListItems and GetTreeSelectListItems functions, which can easily read data from the database and generate data in two formats.</p>
    </wt:quote>
    <wt:tab>
        <wt:tabheaders>
            <wt:tabheader title="Effect" />
            <wt:tabheader title="Code" />
        </wt:tabheaders>
        <wt:tabcontents>
            <wt:tabcontent>
                <wt:form vm="@Model" style="max-width:600px;">
                    <wt:combobox field="SelectedSchool3" label-text="School" items="AllSchools" link-field="SelectedMajor" trigger-url="/UI/GetMajorBySchool"/>
                    <wt:combobox field="SelectedMajor" label-text="Major" link-field="SelectedStudent" trigger-url="/UI/GetStudentByMajor"/>
                     <wt:combobox field="SelectedStudent" label-text="Student"/>
                   <wt:row align="AlignEnum.Right">
                        <wt:submitbutton disabled="true" />
                        <wt:closebutton disabled="true" />
                    </wt:row>
                </wt:form>
            </wt:tabcontent>
            <wt:tabcontent>
                <wt:code>
&ltwt:form vm="@@Model" width="600"&gt
    &ltwt:combobox field="SelectedSchool3" label-text="School" items="AllSchools" link-field="SelectedMajor" trigger-url="/UI/GetMajorBySchool"/&gt
    &ltwt:combobox field="SelectedMajor" label-text="Major" link-field="SelectedStudent" trigger-url="/UI/GetStudentByMajor"/&gt
    &ltwt:combobox field="SelectedStudent" label-text="Student" /&gt
    &ltwt:row align="AlignEnum.Right"&gt
        &ltwt:submitbutton disabled="true" /&gt
        &ltwt:closebutton disabled="true" /&gt
    &lt/wt:row&gt
&lt/wt:form&gt
                </wt:code>
                <wt:code title="/UI/GetMajorBySchool">
public IActionResult GetMajorBySchool(string id)
{
    List&ltSchool&gt schools = new List&ltSchool&gt()
    {
        new School { SchoolName = "Oxford", Majors = new List&ltMajor&gt(){
            new Major{ MajorName = "Physics department"},
            new Major{ MajorName = "Faculty of Mathematics"},
        } },
        new School { SchoolName = "University of Cambridge", Majors = new List&ltMajor&gt(){
            new Major{ MajorName = "Department of literature"},
            new Major{ MajorName = "Department of history"},
        }},
        new School { SchoolName = "Stanford University", Majors = new List&ltMajor&gt(){
            new Major{ MajorName = "Department of Biology"},
            new Major{ MajorName = "Department of Chemistry"},
        }},
        new School { SchoolName = "MIT", Majors = new List&ltMajor&gt(){
            new Major{ MajorName = "Department of industrial control"},
            new Major{ MajorName = "Computer software"},
        }},
        new School { SchoolName = "Harvard University", Majors = new List&ltMajor&gt(){
            new Major{ MajorName = "Department of Humanities"},
            new Major{ MajorName = "Department of Economics"},
        }},
    };

    var rv = schools.Where(x =&gt x.SchoolName == id).SelectMany(x=&gtx.Majors).Select(x =&gt new { Text = x.MajorName, Value = x.ID }).ToList();
    return Json(rv);
}

  public IActionResult GetStudentByMajor(string id)
  {
      //generate fake student data
      List&lt;ComboSelectListItem&gt; rv = new List&lt;ComboSelectListItem&gt;();
      for(int i = 1; i &lt;= 5; i++)
      {
          rv.Add(new ComboSelectListItem
          {
              Text = id + "Student" + i
          }); ;
      }
      return Json(rv);
  }

                </wt:code>
            </wt:tabcontent>
        </wt:tabcontents>
    </wt:tab>

</wt:fieldset>
    <script>
    layui.use('code',function(){layui.code({ about: false })})
        layui.table.init('parse-table-demo', {
        limit: 100, page: false
        });
    </script>
<script>
  $("#@Model.ViewDivId").parent().css("height", "auto");
</script>
